<template>
    <div class="login-pop">
        <div :class="{'passport-pop-wrapper': true, wechat: true, open: isWechat,hide: !isWechat}">
            <div class="change-btn" @click="switchWechat"></div>
            <p class="title">登录</p>
            <div class="scan-content">
                <div class="img-content">
                    <img class="qrCode" alt="小程序码" style="display: none;">
                    <div class="qrCodeCanvas" title="https://weapp.lagou.com/qr/c/login?authId=dswo0dwa369yz08w"
                         style="display: block;">
                        <canvas width="180" height="180"></canvas>
                    </div>
                </div>
                <p class="tips">微信扫一扫，快速登录</p>
            </div>
            <div class="scan-success">
                <div class="scan-success-content">
                    <div class="text">扫描成功</div>
                </div>
            </div>

            <div class="register-btn btn-text" style="display: none;">立即注册</div>
        </div>
        <div :class="{'passport-pop-wrapper': true, account: true, open: !isWechat,hide: isWechat}">
            <div class="logo"></div>

            <div
                    :class="{'forms-area': true, password: loginType === 'password'}"
            >
                <div class="forms-top-wrapper clearfix">
                    <div class="forms-top-inner">
                        <div class="forms-top-block forms-top-password" data-view="passwordLogin">
                            <el-form :model="form" :rules="rules" ref="passwordForm" class="active">

                                <el-form-item prop="phone">
                                    <el-input
                                            type="text"
                                            class="input login_enter_password HtoC_JS"
                                            name=""
                                            placeholder="请输入常用手机号"
                                            data-required="required"
                                            autocomplete="off"
                                            v-model="form.phone"
                                    />
                                </el-form-item>
                                <el-form-item prop="password" :error="errorPasswordMsg">
                                    <el-input
                                            type="password"
                                            class="input login_enter_password HtoC_JS"
                                            name=""
                                            placeholder="请输入密码"
                                            data-required="required"
                                            autocomplete="off"
                                            v-model="form.password"
                                    />
                                </el-form-item>
                                <div class="input_item clearfix verifycode-input"
                                     data-propertyname="request_form_verifyCode" data-controltype="VerifyCode"
                                     style="display: none;">
                                    <div class="input_group clearfix">
                                        <input type="text" class="input verify_code_input fl" name=""
                                               placeholder="请证明你不是机器人" data-required="required" autocomplete="off"><img
                                            alt="点击重试" class="yzm" width="98" height="40"
                                            src="https://passport.lagou.com/vcode/create?from=register&amp;refresh=1592758299934">

                                        <a rel="nofollow" href="javascript:;" class="reflash"></a>
                                    </div>
                                </div>
                            </el-form>
                        </div>
                        <div class="forms-top-block forms-top-code" data-view="codeLogin">
                            <el-form :model="form" :rules="rules" ref="validateCodeForm" class="active">
                                <el-form-item class="phone-content" prop="phoneContent">
                                    <el-popover
                                            popper-class="country-code-popper"
                                            placement="bottom"
                                            width="200"
                                            trigger="manual"
                                            v-model="countryCodePopVisible"
                                    >
                                        <div class="area_code_list">
                                            <dl class="code_list_main">
                                                <div v-for="code in codeData" :key="code.name" >
                                                    <dt>{{code.name}}</dt>
                                                    <dd v-for="country in code.countryList" :key="country.name" @click="countryCodeChangeHandler(country)">
                                                        {{country.name}}<span>{{country.code}}</span>
                                                    </dd>
                                                </div>
                                            </dl>
                                            <p class="tips">如果没有找到您的所在归属地，请拨打客服电话4006282835解决。</p>
                                        </div>
                                        <span
                                                class="area_code"
                                                slot="reference"
                                                @click="toggleCountryCodePopHandler"
                                                @blur="toggleCountryCodePopHandler"
                                        >{{form.countryCode}}</span>
                                    </el-popover>
                                    <el-input placeholder="请输入常用手机号" v-model="form.phoneContent"
                                              class="input-with-select">
                                        <template slot="prepend">
                                            <span class="phone-code-space"></span>
                                        </template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="validateCode" :error="errorValidateCodeMsg">
                                    <el-input placeholder="请输入验证码" v-model="form.validateCode"
                                              class="input-with-select">
                                        <template slot="append">
                                            <span
                                                    class="phone-validate-code-btn"
                                                    v-text="validateCodeText"
                                                    @click="validateBtnHandler"
                                            ></span>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
                <div class="forms-bottom-wrapper">
                    <div
                            class="forms-bottom forms-bottom-code"
                            v-if="loginType !== 'password'"
                    >
                        <div class="change-login-type"
                             @click="switchType"
                        >密码登录
                        </div>
                        <div
                                class="login-btn login-code btn-green"
                                @click="loginRegisterHandler"
                        >登录
                        </div>
                    </div>
                    <div
                            class="forms-bottom forms-bottom-password"
                            v-if="loginType == 'password'"
                    >
                        <div class="clearfix">
                            <div
                                    class="change-login-type"
                                    @click="switchType"
                            >手机验证码登录
                            </div>
                            <a rel="nofollow" href="https://passport.lagou.com/accountPwd/toReset.html"
                               class="forgot_pwd">忘记密码？</a>
                        </div>
                        <div
                                class="login-btn login-password sense_login_password btn-green"
                                @click="loginRegisterHandler"
                        >登录</div>
                    </div>
                    <div class="bottom-icon">
                        <a class="wechat-url" href="http://edufront.lagou.com/front/weixin/login">
                            <img class="wechat-img" src="//www.lgstatic.com/lg-passport-fed/static/pc/modules/common/img/icon-wechat@2x_68c86d1.png" />
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapMutations, mapActions } from 'vuex';

    import {loginRegiste, fetchCountryCode, sendValidateCode, checkValidateCode} from '@/service/index';

    const courntryCode = [
        {
            "name": "常用",
            "countryList": [{"name": "中国", "code": "0086", "length": 11}, {
                "name": "中国香港",
                "code": "00852",
                "length": 8
            }, {"name": "中国台湾", "code": "00886", "length": 10}, {
                "name": "中国澳门",
                "code": "00853",
                "length": 8
            }, {"name": "美国", "code": "001", "length": 7}]
        }, {
            "name": "A",
            "countryList": [{"name": "澳大利亚", "code": "0061", "length": 10}, {
                "name": "中国澳门",
                "code": "00853",
                "length": 8
            }, {"name": "爱尔兰", "code": "00353", "length": 9}]
        }, {"name": "B", "countryList": [{"name": "巴西", "code": "0055", "length": 8}]}, {
            "name": "D",
            "countryList": [{"name": "德国", "code": "0049", "length": 10}]
        }, {"name": "E", "countryList": [{"name": "俄罗斯", "code": "007", "length": 11}]}, {
            "name": "F",
            "countryList": [{"name": "法国", "code": "0033", "length": 10}]
        }, {
            "name": "H",
            "countryList": [{"name": "韩国", "code": "0082", "length": 11}, {
                "name": "荷兰",
                "code": "0031",
                "length": 11
            }]
        }, {"name": "J", "countryList": [{"name": "加拿大", "code": "001", "length": 7}]}, {
            "name": "M",
            "countryList": [{"name": "马来西亚", "code": "0060", "length": 9}, {
                "name": "美国",
                "code": "001",
                "length": 7
            }]
        }, {"name": "R", "countryList": [{"name": "日本", "code": "0081", "length": 11}]}, {
            "name": "T",
            "countryList": [{"name": "中国台湾", "code": "00886", "length": 10}, {
                "name": "泰国",
                "code": "0066",
                "length": 9
            }]
        }, {
            "name": "X",
            "countryList": [{"name": "中国香港", "code": "00852", "length": 8}, {
                "name": "新加坡",
                "code": "0065",
                "length": 8
            }, {"name": "新西兰", "code": "0064", "length": 9}]
        }, {
            "name": "Y",
            "countryList": [{"name": "印度", "code": "0091", "length": 10}, {
                "name": "英国",
                "code": "0044",
                "length": 11
            }, {"name": "越南", "code": "0084", "length": 10}, {"name": "印度尼西亚", "code": "0062", "length": 11}]
        }, {"name": "Z", "countryList": [{"name": "中国", "code": "0086", "length": 11}]}];
    const validateLevel = 60
    export default {
        name: "PCLoginModal",
        components: {},
        computed: {},
        data() {
            return {
                weixinImg: require('@assets/course-list/logo-wechat.png'),
                loginType: 'validateCode',
                isWechat: false,
                countryCodePopVisible: false,
                form: {
                    phone: '',
                    password: '',
                    phoneContent: '',
                    countryCode: '0086',
                    validateCode: ''
                },
                validateCounter: validateLevel,
                validateCodeText: '获取验证码',
                timer: null,
                codeData: courntryCode,
                rules: {
                    phone: [
                        {validator: this.validatePhone, trigger: 'blur'}
                    ],
                    password: [
                        {validator: this.validatePassword, trigger: 'blur'}
                    ],
                    validateCode: [
                        {validator: this.validateCode, trigger: 'blur'}
                    ],
                    phoneContent: [
                        {validator: this.validatePhoneContent, trigger: 'blur'}
                    ],
                },
                errorPasswordMsg: null,
                errorValidateCodeMsg: null
            };
        },
        created() {
            fetchCountryCode()
                .then(res => {
                    if (res.state === 1) {
                        let returnData = res.content && res.content.rows || null;
                        returnData && (this.codeData = returnData);
                    }
                })
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getUserInfo', 'setH5LoginModalStatus']),
            validatePhone(rule, value, callback) {
                if (value) {
                    if (/^\d{5,11}$/.test(this.form.phone)) {
                        return callback();
                    } else {
                        return callback(new Error('手机格式不正确，请重新输入'));

                    }
                }
                return callback(new Error('请输入手机号'));
            },
            validatePhoneContent(rule, value, callback) {
                if (value) {
                    if (/^\d{5,16}$/.test(this.form.countryCode + '' +  this.form.phoneContent)) {
                        return callback();
                    } else {
                        return callback(new Error('手机格式不正确，请重新输入'));

                    }
                }
                return callback(new Error('请输入手机号'));
            },
            validateCode(rule, value, callback) {
                if(this.errorValidateCodeMsg){
                    return callback(this.errorValidateCodeMsg);
                }
                if (value) {
                    if (/^[0-9]{6,6}$/.test(this.form.validateCode)) {
                        return callback();
                    } else {
                        return callback(new Error('请输入正确的手机验证码'));
                    }
                }
                return callback(new Error('请输入手机验证码'));
            },

            validatePassword(rule, value, callback) {
                if(this.errorPasswordMsg){
                    return callback(this.errorPasswordMsg);
                }
                if (value) {
                    if (/^[\S\s]{6,16}$/.test(value)) {
                        return callback();
                    } else {
                        return callback(new Error('请输入6-16位密码，字母区分大小写'));
                    }
                }
                return callback(new Error('请输入密码'));
            },
            switchWechat() {
                this.isWechat = !this.isWechat;

            },
            switchType() {
                this.loginType = this.loginType === 'password' ? 'code' : 'password';
            },
            loginRegisterHandler() {
                if (this.loginType === 'password') {
                    this.$refs.passwordForm.validate((valid) => {
                        if (valid) {
                            const {phone, password} = this.form;
                            loginRegiste({
                                phone,
                                password
                            }).then((res) => {
                                this.loginSuccessCallback(res)
                            })
                        }
                    });
                } else {
                    this.$refs.validateCodeForm.validate((valid) => {
                        if (valid) {
                            const {phoneContent, countryCode, validateCode} = this.form;
                            loginRegiste({
                                phone: countryCode  == '0086' ? phoneContent : (countryCode + phoneContent),
                                code: validateCode
                            }).then((res) => {
                                this.loginSuccessCallback(res)
                            })
                        }
                    });
                }

            },
            loginSuccessCallback(res){
                let content = JSON.parse(res.data.content);
                if(res.data.state === 1){
                    window.localStorage.setItem('accessToken', content.access_token);
                    window.localStorage.setItem('refreshToken', content.refresh_token);
                    this.getUserInfo();
                    this.setH5LoginModalStatus({
                        showH5LoginModal: false,
                        showH5LoginModalType: 'distribution'
                    });
                }else{
                    if(this.loginType === 'password'){
                        this.errorPasswordMsg = res.data.message
                        this.$refs.passwordForm.validate((valid) => {
                            this.errorPasswordMsg = null
                        })
                    }else{
                        this.errorValidateCodeMsg = res.data.message
                        this.$refs.validateCodeForm.validate((valid) => {
                            this.errorValidateCodeMsg = null
                        })
                    }

                }
            },
            countryCodeChangeHandler(e){
                this.form.countryCode = e.code;
            },
            toggleCountryCodePopHandler(){
                this.countryCodePopVisible  = !this.countryCodePopVisible;
            },
            validateBtnHandler(e){
                if(this.validateCounter !== validateLevel){
                    return;
                }
                this.$refs.validateCodeForm.validateField(['phoneContent'],(errMessage) => {
                    if(!errMessage){
                        this.startValidate()
                    }
                })
            },
            startValidate(){
                const that = this;
                if(that.validateCounter  == validateLevel){
                    that.timer = setTimeout(function () {
                            that.validateCounter--;
                            that.validateCodeText = `${that.validateCounter}秒后可重试`
                            that.startValidate();
                    }, 1000)
                    that.fetchValidateCode()
                }else{
                    that.timer = setTimeout(function () {
                        if(that.validateCounter == 0){
                            that.validateCounter = validateLevel;
                            that.validateCodeText = `重新获取验证码`;
                            window.clearTimeout(that.timer)
                        }else{
                            that.validateCounter--;
                            that.validateCodeText = `${that.validateCounter}秒后可重试`
                            that.startValidate();
                        }

                    }, 1000)
                }
            },

            fetchValidateCode(){
                const {countryCode, phoneContent } = this.form;
                const phone = countryCode  == '0086' ? phoneContent : (countryCode + phoneContent)
                sendValidateCode({
                    telephone: phone
                }).then(res =>{

                })
            }
        }
    }
</script>

<style>
    .hide {
        display: none;
    }

    .open {
        display: block;
    }

    .login-pop.modal.fade .modal-dialog,
    .register-pop.modal.fade .modal-dialog {
        -webkit-transform: translate(-50%, -45%);
        -ms-transform: translate(-50%, -45%);
        -o-transform: translate(-50%, -45%);
        transform: translate(-50%, -45%);
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        -o-transition: -o-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }

    .login-pop.modal.in .modal-dialog,
    .register-pop.modal.in .modal-dialog {
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .login-pop.modal .modal-dialog,
    .register-pop.modal .modal-dialog {
        width: 436PX;
        min-height: 489PX;
        background: #fff;
        border-radius: 3PX;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
    }

    .login-pop.modal .modal-content,
    .register-pop.modal .modal-content {
        border: none;
        box-shadow: none;
        margin: auto;
        overflow: hidden;
    }
    .phone-code-space{
        display: inline-block;
        width: 42PX;
    }
    .phone-validate-code-btn{
        color: #00b38a;
        cursor: pointer;
        user-select: none;
    }
    .forms-top-code .el-input-group__append{
        background: #f4f4f4;
        border: none;
    }

    .phone-content .el-input-group__prepend{
        background: #f4f4f4;
    }

    .passport-pop-wrapper {
        width: 100%;
        height: 100%;
        padding: 10PX;
        box-sizing: border-box;
        font-size: 14PX;
        -webkit-font-smoothing: antialiased;
    }

    .passport-pop-wrapper .change-btn {
        width: 52PX;
        height: 52PX;
        position: absolute;
        top: 10PX;
        left: 10PX;
        cursor: pointer;
    }

    .passport-pop-wrapper.account .change-btn {
        background-image: url();
        background-repeat: no-repeat;
        background-position: -440PX -268PX;
    }

    .passport-pop-wrapper.account .change-btn:hover {
        background-position: -334PX -330PX;
    }

    .forms-top-inner {
        transform: translate(0);
        transition: all ease 0.3s;
    }

    .passport-pop-wrapper .auto_phone {
        padding-left: 0;
    }

    .passport-pop-wrapper .logo {
        width: 86PX;
        height: 42PX;
        margin: 35PX auto 40PX;
        background-image: url();
        background-repeat: no-repeat;
        background-position: -334PX -268PX;
    }

    .passport-pop-wrapper .forms-area {
        width: 316PX;
        margin: auto;
        overflow: hidden;
    }

    .passport-pop-wrapper .forms-top-wrapper {
        position: relative;
        width: 100%;
    }

    .passport-pop-wrapper .forms-top-inner {
        width: 200%;
    }

    .passport-pop-wrapper .forms-top-block {
        width: 50%;
        float: left;
        margin-bottom: -3PX;
    }

    .passport-pop-wrapper .input_item {
        position: relative;
        width: 316PX;
        margin-bottom: 16PX;
        box-sizing: border-box;
        border: 1PX solid #fff;
    }

    .passport-pop-wrapper .input_border {
        border: 1PX solid #fff;
    }

    .passport-pop-wrapper .input_border.focus {
        border: 1PX solid #00b38a;
    }

    .passport-pop-wrapper .input_border.focus input {
        background: #fff;
    }

    .passport-pop-wrapper .input_border.focus .input_group {
        background: #fff;
    }

    .passport-pop-wrapper input, .login_enter_password /deep/ input {
        box-sizing: border-box;
        width: 100%;
        height: 50PX;
        padding-left: 18PX;
        background: none;
        border-radius: 0;
        font-size: 14PX;
        border: none;
        background: #f4f4f4;
    }

    .passport-pop-wrapper input::placeholder {
        font-size: 14PX;
        color: #999;
    }

    .passport-pop-wrapper .input_group {
        background: #f4f4f4;
    }

    .passport-pop-wrapper .change-login-type {
        cursor: pointer;
        margin-bottom: 25PX;
        font-size: 14PX;
        color: #00b38a;
    }

    .passport-pop-wrapper .btn-green {
        width: 316PX;
        height: 48PX;
        line-height: 48PX;
        font-size: 16PX;
        text-align: center;
        color: #fff;
        background-image: url();
        background-repeat: no-repeat;
        background-position: -20PX -20PX;
        margin-bottom: 20PX;
        cursor: pointer;
    }

    .passport-pop-wrapper .btn-green:hover {
        background-position: -20PX -88PX;
    }

    .passport-pop-wrapper .btn-text {
        width: 100%;
        font-size: 16PX;
        color: #666;
        text-align: center;
        cursor: pointer;
    }

    .passport-pop-wrapper .btn-text:hover {
        color: #00b38a;
    }

    .passport-pop-wrapper .third-login {
        margin-top: 30PX;
        font-size: 14PX;
        color: #999;
    }

    .forms-bottom-wrapper{
        margin-top: 10PX;
    }
    .bottom-icon{
        text-align: center;
    }
    .wechat-url{
        display: inline-block;
        margin: 0 auto;
    }
    .wechat-img{
        width: 20PX;
        height: 16PX;
    }

    .passport-pop-wrapper .third-login .third-login-btns {
        display: inline-block;
        vertical-align: middle;
    }

    .passport-pop-wrapper .third-login .third-login-btns a {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        margin: 0 13PX;
        background-image: url("https://s0.lgstatic.com/lg-static-fed/image/login/third-sprite.png");
        background-repeat: no-repeat;
    }

    .passport-pop-wrapper .third-login .third-login-btns a.baidu {
        margin-right: 0;
    }

    .passport-pop-wrapper .third-login .weibo {
        width: 27PX;
        height: 27PX;
        background-position: -196PX -82PX;
    }

    .passport-pop-wrapper .third-login .weibo:hover {
        background-position: -150PX -82PX;
    }

    .passport-pop-wrapper .third-login .wechat {
        width: 27PX;
        height: 27PX;
        background-position: -102PX -206PX;
    }

    .passport-pop-wrapper .third-login .wechat:hover {
        background-position: -149PX -206PX;
    }

    .passport-pop-wrapper .third-login .qq {
        width: 27PX;
        height: 27PX;
        background-position: -196PX -123PX;
    }

    .passport-pop-wrapper .third-login .qq:hover {
        background-position: -196PX -164PX;
    }

    .passport-pop-wrapper .third-login .baidu {
        width: 27PX;
        height: 27PX;
        background-position: -20PX -210PX;
    }

    .passport-pop-wrapper .third-login .baidu:hover {
        background-position: -61PX -210PX;
    }
    .phone-content .el-input-group__append{
            border-radius: 0;
            font-size: 14PX;
            border: none;
            background: #f4f4f4;
            height: 50PX;
    }
    .phone-content .el-input-group__prepend{
            border: none;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dpPX) {
        .passport-pop-wrapper .third-login .third-login-btns a {
            background-size: 128PX 128PX;
        }

        .passport-pop-wrapper .third-login .weibo {
            background-position: -82PX -10PX;
        }

        .passport-pop-wrapper .third-login .weibo:hover {
            background-position: -40PX -41PX;
        }

        .passport-pop-wrapper .third-login .wechat {
            background-position: -10PX -10PX;
        }

        .passport-pop-wrapper .third-login .wechat:hover {
            background-position: -46PX -10PX;
        }

        .passport-pop-wrapper .third-login .qq {
            background-position: -40PX -72PX;
        }

        .passport-pop-wrapper .third-login .qq:hover {
            background-position: -69PX -72PX;
        }

        .passport-pop-wrapper .third-login .baidu {
            background-position: -10PX -41PX;
        }

        .passport-pop-wrapper .third-login .baidu:hover {
            background-position: -10PX -73PX;
        }
    }

    .passport-pop-wrapper .input_item.verifycode-input .input {
        width: 214PX;
        float: left;
    }

    .passport-pop-wrapper .input_item.verifycode-input .yzm {
        width: 98PX;
        height: 40PX;
        margin-top: 5PX;
        float: left;
    }

    .passport-pop-wrapper .input_item.code-input .input {
        width: 216PX;
        float: left;
    }

    .passport-pop-wrapper .input_item.code-input .btn {
        width: 95PX;
        float: left;
        padding: 0;
        font-size: 14PX;
        color: #00b38a;
        text-align: center;
        line-height: 48PX;
        border: none;
        background: none;
    }

    .passport-pop-wrapper .input_item.auto-input {
        background: none;
        line-height: 40PX;
        margin-bottom: 0;
    }

    .passport-pop-wrapper .input_item.auto-input .auto_phone {
        display: inline-block;
        width: auto;
        height: auto;
        outline: 0;
        text-decoration: none;
        color: #00b389;
        cursor: pointer;
        background-color: transparent;
        border: 0;
        font-size: 14PX;
    }

    .passport-pop-wrapper .input_tips {
        display: block;
        margin: 10PX 0 0PX;
        font-size: 12PX;
        color: #ff7452;
    }

    .passport-pop-wrapper .reflash {
        position: absolute;
        right: 3PX;
        top: 5PX;
        z-index: 2;
        height: 40PX;
        width: 98PX;
    }

    .passport-pop-wrapper.wechat {
        position: static;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.95);
        z-index: 2;
    }

    .passport-pop-wrapper.wechat .change-btn {
        background-image: url();
        background-repeat: no-repeat;
        background-position: -406PX -340PX;
    }

    .passport-pop-wrapper.wechat .change-btn:hover {
        background-position: -334PX -402PX;
    }

    .passport-pop-wrapper.wechat .title {
        margin-top: 74PX;
        font-size: 18PX;
        color: #333;
        text-align: center;
        font-weight: bolder;
    }

    .passport-pop-wrapper.wechat .tips {
        text-align: center;
        margin: 15PX 0;
    }

    .passport-pop-wrapper.wechat .img-content {
        margin-top: 25PX;
        text-align: center;
        height: 180PX;
    }

    .passport-pop-wrapper.wechat .img-content img[src=""],
    .passport-pop-wrapper.wechat .img-content img:not([src]) {
        opacity: 0;
    }

    .passport-pop-wrapper.wechat .qrCode {
        margin: auto;
        width: 180PX;
        height: 180PX;
    }

    .passport-pop-wrapper.wechat .qrCodeCanvas {
        display: none;
        margin: auto;
        width: 180PX;
        height: 180PX;
    }

    .passport-pop-wrapper.wechat .qr-tip {
        margin-top: 20PX;
        font-family: PingFangSC-Regular;
        font-size: 14PX;
        color: #666666;
        text-align: center;
    }

    .passport-pop-wrapper.wechat .scan-content {
        height: 217PX;
    }

    .passport-pop-wrapper.wechat .scan-success {
        display: none;
        position: absolute;
        top: 88PX;
        left: 130PX;
        width: 186PX;
        height: 186PX;
        color: white;
    }

    .passport-pop-wrapper.wechat .scan-success-content {
        position: absolute;
        top: 80%;
        left: 50%;
        width: 100%;
        text-align: center;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .passport-pop-wrapper.wechat .scan-success-content:before {
        content: "";
        display: block;
        width: 85PX;
        height: 85PX;
        margin: auto;
        background-image: url();
        background-repeat: no-repeat;
        background-position: -20PX -156PX;
    }

    .passport-pop-wrapper.wechat .scan-success-content .text {
        margin: 27PX 0;
        font-size: 22PX;
        color: #00B38A;
    }

    .passport-pop-wrapper.wechat .register-btn {
        margin-top: 60PX;
    }

    .passport-pop-wrapper .verify_tips_main {
        display: none;
    }

    .passport-pop-wrapper .verify_tips_count_down {
        display: none;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dpPX) {
        .passport-pop-wrapper.account .change-btn {
            background-size: 256PX 256PX;
            background-position: -178PX -10PX;
        }

        .passport-pop-wrapper.account .change-btn:hover {
            background-position: -178PX -72PX;
        }

        .passport-pop-wrapper .logo {
            background-size: 256PX 256PX;
            background-position: -62.5PX -78PX;
        }

        .passport-pop-wrapper.wechat .change-btn {
            background-size: 256PX 256PX;
            background-position: -105PX -130PX;
        }

        .passport-pop-wrapper.wechat .change-btn:hover {
            background-position: -105PX -192PX;
        }

        .passport-pop-wrapper.wechat .scan-success-content:before {
            background-size: 256PX 256PX;
            background-position: -10PX -134PX;
        }
    }

    .country-code-popper{
        padding: 0;
        font-size: 14PX;
    }
    .country-code-popper /deep/ .area_code_list {
        height: 288PX;
        overflow: auto;
    }
    .country-code-popper /deep/ .area_code_list .option-item span {
        float: right;
    }
    .country-code-popper /deep/ .area_code_list .tips {
        color: #B5B5B5;
        padding: 40PX 12PX;
    }
    .country-code-popper /deep/ .area_code_list dl {
        line-height: 36PX;
        cursor: default
    }

    .country-code-popper /deep/ .area_code_list dt {
        padding: 0 12PX;
        color: #999;
        background-color: #FBFBFB
    }

    .country-code-popper /deep/ .area_code_list dd {
        padding: 0 12PX;
        color: #555
    }

    .country-code-popper /deep/ .area_code_list dd:hover {
        background-color: #F4F4F4;
        color: #00b38a
    }

    .country-code-popper /deep/ .area_code_list dd span {
        float: right
    }

    .country-code-popper /deep/ .area_code_list .tips {
        color: #B5B5B5;
        padding: 40PX 12PX
    }

    .phone-input input {
        padding-left: 100PX;
    }

    .area_code {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        float: left;
        width: 50PX;
        height: 50PX;
        padding-right: 20PX;
        line-height: 50PX;
        cursor: default;
        padding-left: 18PX;
    }

    .area_code:after {
        position: absolute;
        right: 8PX;
        top: 24PX;
        display: block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5PX 5PX 0 5PX;
        border-color: #9c9c9c transparent transparent transparent;
    }

    .area_code.active:after {
        transform: scale(-1);
    }


    .login-pop .forms-top-inner {
        transform: translate(-316PX);
    }

    .login-pop .forms-top-password {
        height: 140PX;
        overflow: hidden;
        transition: all ease 0.3s;
        opacity: 0;
        visibility: hidden;
    }

    .login-pop .forms-top-code {
        opacity: 1;
        visibility: visible;
        transition: all ease 0.3s;
    }

    .login-pop .passport-pop-wrapper .forms-area.password .forms-top-code {
        opacity: 0;
        visibility: hidden;
    }

    .login-pop .passport-pop-wrapper .forms-area.password .forms-top-password {
        height: auto;
        overflow: visible;
        opacity: 1;
        visibility: visible;
    }

    .login-pop .passport-pop-wrapper .forms-area.password .forms-top-code {
        height: 140PX;
        overflow: hidden;
    }

    .login-pop .passport-pop-wrapper .forms-area.password .forms-top-inner {
        transform: translate(0);
    }

    .login-pop .passport-pop-wrapper .forms-area.password .forms-bottom-password {
        display: block;
    }

    .login-pop .forms-bottom-password .change-login-type {
        width: 150PX;
        float: left;
    }

    .login-pop .forms-bottom-password .forgot_pwd {
        position: relative;
        float: right;
        font-size: 14PX;
        display: block;
        text-align: right;
        text-decoration: none;
        color: #999;
    }

    .login-pop .passport-pop-wrapper .change-btn:after {
        background-image: url("https://s0.lgstatic.com/lg-static-fed/image/login/pop-sprite.png");
        background-repeat: no-repeat;
    }

    .login-pop .passport-pop-wrapper.account .change-btn:after {
        content: "";
        position: absolute;
        top: -2PX;
        right: -112PX;
        width: 107PX;
        height: 36PX;
        background-position: -381PX -260PX;
    }

    .login-pop .passport-pop-wrapper.wechat .change-btn:after {
        content: "";
        position: absolute;
        top: -2PX;
        right: -117PX;
        width: 119PX;
        height: 36PX;
        background-position: -381PX -204PX;
    }

    .login-pop .passport-pop-wrapper.wechat .password.change-btn:after {
        content: "";
        position: absolute;
        top: -2PX;
        right: -117PX;
        width: 119PX;
        height: 36PX;
        background-position: -254PX -204PX;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dpPX) {
        .login-pop .passport-pop-wrapper .change-btn:after {
            background-size: 256PX 256PX;
        }

        .login-pop .passport-pop-wrapper.account .change-btn:after {
            background-position: -127PX -56PX;
        }

        .login-pop .passport-pop-wrapper.wechat .change-btn:after {
            background-position: -127PX -10PX;
        }

        .login-pop .passport-pop-wrapper.wechat .password.change-btn:after {
            background-position: -10PX -10PX;
        }
    }

    .register-pop .passport-pop-wrapper .forms-top-block {
        margin-bottom: 0;
    }

    .register-pop .switch-tab {
        width: 100%;
        overflow: hidden;
        margin-bottom: 10PX;
    }

    .register-pop .switch-tab div {
        position: relative;
        font-size: 16PX;
        color: #666;
        margin: 0 35PX 15PX 5PX;
        float: left;
        cursor: pointer;
        transition: all ease 0.3s;
    }

    .register-pop .switch-tab div:after {
        content: "";
        position: absolute;
        bottom: -8PX;
        left: 10%;
        width: 63%;
        height: 2PX;
        background: #333;
        opacity: 0;
        transition: all ease 0.3s;
    }

    .register-pop .switch-tab div.active {
        color: #333;
        font-weight: bold;
    }

    .register-pop .switch-tab div.active:after {
        opacity: 1;
    }

    .register-pop [data-view="phoneRegisterC"] {
        height: auto;
        overflow: visible;
        opacity: 1;
        visibility: visible;
        transition: all ease 0.3s;
    }

    .register-pop [data-view="phoneRegisterB"] {
        height: 140PX;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: all ease 0.3s;
    }

    .register-pop .forms-top-wrapper.account-b [data-view="phoneRegisterC"] {
        height: 140PX;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
    }

    .register-pop .forms-top-wrapper.account-b [data-view="phoneRegisterB"] {
        height: auto;
        overflow: visible;
        opacity: 1;
        visibility: visible;
    }

    .register-pop .forms-top-wrapper.account-b .forms-top-inner {
        transform: translate(-316PX);
    }

    .register-pop .agreement {
        width: 100%;
        margin-top: 30PX;
        text-align: center;
        font-size: 12PX;
        color: #999;
    }

    .register-pop .agreement a {
        color: #00b38a;
    }

    .register-pop .wechat .login-btn {
        margin-top: 90PX;
    }

    .register-pop .passport-pop-wrapper .change-btn:after {
        background-image: url();
        background-repeat: no-repeat;
    }

    .register-pop .passport-pop-wrapper.account .change-btn:after {
        content: "";
        position: absolute;
        top: -2PX;
        right: -112PX;
        width: 107PX;
        height: 36PX;
        background-position: -20PX -296PX;
    }

    .register-pop .passport-pop-wrapper.wechat .change-btn:after {
        content: "";
        position: absolute;
        top: -2PX;
        right: -117PX;
        width: 119PX;
        height: 36PX;
        background-position: -254PX -260PX;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dpPX) {
        .register-pop .passport-pop-wrapper .change-btn:after {
            background-size: 256PX 256PX;
        }

        .register-pop .passport-pop-wrapper.account .change-btn:after {
            background-position: -10PX -102PX;
        }

        .register-pop .passport-pop-wrapper.wechat .change-btn:after {
            background-position: -10PX -56PX;
        }
    }
</style>
